import React, { lazy } from "react";
import { RouteObject } from "react-router-dom";
import { Navigate } from "react-router";

// 代码懒加载 分包处理 第一层 outlet->suspense
const Discover = lazy(() => import("@/views/discover/index"));
const Mine = lazy(() => import("@/views/mine/index"));
const Focus = lazy(() => import("@/views/focus/index"));
const Download = lazy(() => import("@/views/download/index"));
// 第二层 outlet->suspense 如果这里不使用 suspense
// 会导致第二层 出现闪屏(所有文件只有在第一次请求时才加载)
const Album = lazy(() => import("@/views/discover/c-views/album/index"));
const Artist = lazy(() => import("@/views/discover/c-views/artist/index"));
const DJRadio = lazy(() => import("@/views/discover/c-views/djradio/index"));
const Ranking = lazy(() => import("@/views/discover/c-views/ranking/index"));
const Song = lazy(() => import("@/views/discover/c-views/song/index"));
const Recommend = lazy(() => import("@/views/discover/c-views/recommend/index"));

const routes: RouteObject[] = [
  {
    path: "/",
    element: <Navigate to="/discover" />
  },
  {
    path: "/discover",
    element: <Discover />,
    children: [
      {
        path: "/discover",
        element: <Navigate to="/discover/recommend" />
      },
      {
        path: "/discover/recommend",
        element: <Recommend />
      },
      {
        path: '/discover/album',
        element: <Album />
      },
      {
        path: '/discover/artist',
        element: <Artist />
      },
      {
        path: '/discover/djradio',
        element: <DJRadio />
      },
      {
        path: '/discover/ranking',
        element: <Ranking />
      },
      {
        path: '/discover/song',
        element: <Song />
      }
    ]
  },
  {
    path: "/mine",
    element: <Mine />
  },
  {
    path: "/focus",
    element: <Focus />
  },
  {
    path: "/download",
    element: <Download />
  }
];

export default routes;
